<template>
  <view>
    <!-- 1. 顶部用户信息区（复用对方结构，保留你的登录状态逻辑） -->
    <view class="dd">
      <view class="item1">
        <image class="tx" src="/static/头像.png" mode="widthFix"></image>
        <view class="item2">
          <view class="item3">HI~欢迎回来</view>
          <!-- 登录状态切换：未登录显示"登录"，已登录显示用户名+退出按钮 -->
          <view class="item4" v-if="!isLogin">
            <text class="itemz" @click="goToLogin">登录</text>
          </view>
          <view class="item4 logout-btn" v-else>
            <text class="itemz" @click="goToLogout">退出登录</text>
          </view>
        </view>
      </view>

      <!-- 关注/话题数据 -->
      <view class="er1">
        <view class="er2">关注3</view>
        <view class="er3">丨</view>
        <view class="er4">话题0</view>
      </view>
    </view>

    <!-- 2. 功能菜单区（收藏/历史/设置，保留你的登录拦截） -->
    <view class="item-dj">
      <view>
        <navigator url="" @click.prevent="checkLoginStatus('collect')">
          <view class="item-left">
            <image class="menpiao" src="/static/收藏.png" mode="widthFix"></image>
          </view>
          <view class="item-left">收藏</view>
        </navigator>
      </view>
      <view>
        <navigator url="" @click.prevent="checkLoginStatus('history')">
          <view class="item-left">
            <image class="menpiao1" src="/static/历史.png" mode="widthFix"></image>
          </view>
          <view class="item-left">历史</view>
        </navigator>
      </view>
      <view>
        <navigator url="" @click.prevent="checkLoginStatus('setting')">
          <view class="item-left">
            <image class="menpiao2" src="/static/设置.png" mode="widthFix"></image>
          </view>
          <view class="item-left">设置</view>
        </navigator>
      </view>
    </view>

    <!-- 3. 横幅广告图 -->
    <view>
      <image style="width: 100%; height: 90rpx;" src="/static/images/my/gg.jpg" mode="widthFix"></image>
    </view>

    <!-- 4. 发布引导区 -->
    <view>
      <image class="buttons" style="width: 100%; height: 300rpx;" src="/static/images/my/stup.png" mode="widthFix"></image>
      <view class="button"><text class="hh">已有</text>385,893<text class="hh">人</text></view>
      <view class="button"><text class="hh">在这里发布身边的新鲜事</text></view>
      <view class="reg-right" @click="checkLoginStatus('publish')">我也要发布</view>
    </view>

    <!-- 5. 逛逛入口 -->
    <view class="button">
      <view class="buttonx" @click="goToBrowse">先去逛逛
        <image class="buttony" src="/static/images/icons/you.png" mode="widthFix"></image>
      </view>
    </view>

    <!-- 6. 底部空白区 -->
    <view class="zh"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false, // 保留你的登录状态标记
      username: '' // 保留用户名缓存
    };
  },
  // 保留你的初始化逻辑（修复对方的options未定义错误）
  onLoad() {
    this.initLoginStatus();
  },
  onShow() {
    this.initLoginStatus();
    // 保留你的TabBar文字切换逻辑（比对方更完善）
    const name = uni.getStorageSync('username');
    if (name) {
      uni.setTabBarItem({ index: 3, text: '我的' });
      uni.hideTabBarRedDot({ index: 3 });
    } else {
      uni.setTabBarItem({ index: 3, text: '未登录' });
    }
  },
  methods: {
    // 保留你的登录状态初始化（从缓存读取）
    initLoginStatus() {
      const token = uni.getStorageSync('userToken');
      const username = uni.getStorageSync('username');
      this.isLogin = !!token;
      this.username = username || '';
    },

    // 保留你的退出登录逻辑
    goToLogout() {
      uni.showModal({
        title: '确认退出',
        content: '是否退出当前账号？',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('userToken');
            uni.removeStorageSync('username');
            uni.setTabBarItem({ index: 3, text: '未登录' });
            this.initLoginStatus();
            uni.showToast({ title: '退出成功' });
          }
        }
      });
    },

    // 保留你的功能拦截逻辑（未登录跳转登录页）
    checkLoginStatus(funcType) {
      if (!this.isLogin) {
        uni.showModal({
          title: "请先登录",
          content: `使用${this.getFuncName(funcType)}功能需先登录账号`,
          confirmText: "去登录",
          cancelText: "暂不登录",
          success: (res) => {
            if (res.confirm) {
              // 注意：这里的登录页路径要和你项目实际路径一致！
              uni.navigateTo({ url: "/pages/NewsTaBar/mine/Login/Login" });
            }
          }
        });
      } else {
        // 已登录跳转对应功能页
        uni.navigateTo({ url: `/pages/NewsTaBar/mine/${funcType}/${funcType}` });
      }
    },

    // 保留功能名称映射
    getFuncName(funcType) {
      const funcMap = { collect: "收藏", history: "历史记录", setting: "设置", publish: "发布" };
      return funcMap[funcType] || "该";
    },

    // 保留跳转登录页方法
    goToLogin() {
      uni.navigateTo({ url: "/pages/NewsTaBar/mine/Login/Login" });
    },

    // 保留跳转逛逛页面方法
    goToBrowse() {
      uni.navigateTo({ url: "/pages/NewsTaBar/topic/topic" });
    }
  }
};
</script>

<style scoped>
/* 完全复用对方的CSS，仅修复布局错乱问题 */
.dd {
  padding-bottom: 0rpx;
  background-image: url(/static/images/my/bjmh.png); /* 改为根路径 */
  background-position: center;
  background-size: cover; /* 新增：保证背景图铺满 */
  margin-top: -30rpx;
  height: 280rpx;
}

.tx {
  width: 130rpx; /* 补充宽度，修复图片显示异常 */
  height: 130rpx;
  margin-top: 10rpx;
  border-radius: 50%; /* 新增：头像圆形 */
  border: 4rpx solid #fff; /* 新增：白色边框 */
}

.item1 {
  display: flex;
  margin-top: 30rpx;
  margin-left: 20rpx;
}

.item2 {
  margin-top: 15rpx;
}

.item3 {
  margin-left: 20rpx;
  color: #FFFFFF;
  font-weight: bold;
  margin-top: 10rpx;
  font-size: 28rpx;
}

.item4 {
  border-radius: 20rpx;
  color: #FFFFFF;
  width: 150rpx;
  height: 50rpx; /* 修复原代码heigh拼写错误 */
  background-color: #DD524D;
  margin-left: 20rpx;
  margin-top: 10rpx;
  display: flex;
  align-items: center; /* 垂直居中 */
}

/* 退出登录按钮样式 */
.item4.logout-btn {
  background-color: #666666;
}

.itemz {
  color: #FFFFFF;
  margin-left: 45rpx;
  font-size: 24rpx;
}

.er1 {
  display: flex;
  align-items: center; /* 垂直居中 */
  margin-top: 40rpx; /* 调整距离，修复原代码间距过大 */
  margin-left: 80rpx;
  opacity: 0.8; /* 提高透明度，更清晰 */
}

.er2 {
  margin-left: 50rpx;
  color: #FFFFFF;
  font-size: 24rpx;
}

.er3 {
  margin-left: 140rpx;
  color: #FFFFFF;
  font-size: 24rpx;
}

.er4 {
  margin-left: 150rpx;
  color: #FFFFFF;
  font-size: 24rpx;
}

.item-dj {
  display: flex;
  flex-direction: row;
  justify-content: space-around; /* 均匀分布 */
  border-bottom: 1rpx solid #e6e6e6;
  margin-top: -50rpx;
  margin-bottom: 5rpx;
  background-color: #fff; /* 新增：白色背景 */
  padding: 20rpx 0; /* 新增：上下内边距 */
}

.item-left {
  height: auto; /* 修复原代码高度限制导致的错乱 */
  line-height: normal; /* 重置行高 */
  width: auto; /* 重置宽度 */
  text-align: center;
  margin: 0; /* 清除原代码过大边距 */
  font-size: 24rpx;
  padding-bottom: 1rpx;
}

/* 功能图标样式统一 */
.menpiao, .menpiao1, .menpiao2 {
  width: 45rpx;
  height: 45rpx;
  text-align: center;
  margin-top: 0; /* 清除原代码过大边距 */
  margin-bottom: 10rpx; /* 图标和文字间距 */
}

.buttons {
  margin-top: 0rpx;
  border-radius: 0; /* 修复圆角问题 */
}

.button {
  text-align: center;
  margin: 10rpx 0; /* 上下间距 */
}

.reg-right {
  border: 2rpx solid #DD524D;
  width: 250rpx;
  height: 65rpx;
  text-align: center;
  color: #DD524D;
  border-radius: 40rpx;
  margin-bottom: 20rpx;
  line-height: 70rpx;
  margin-top: 20rpx;
  margin-left: auto; /* 水平居中 */
  margin-right: auto; /* 水平居中 */
  font-size: 24rpx;
}

.buttonx {
  color: #999999;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hh {
  color: #999999;
  font-size: 24rpx;
}

.zh {
  height: 200rpx;
}

.buttony {
  width: 35rpx;
  height: 35rpx;
  margin-left: 8rpx;
  vertical-align: middle;
}
</style>